import React, { useState } from 'react'

export default function ComplexHookState() {
  const [ friends, setFriends ] = useState(["ACE", "SABO", "Luffy"]);
  const [students, setStudents] = useState([
    { id: 1, name: "ming", age: 18},
    { id: 2, name: "xiaohu", age: 45},
    { id: 3, name: "gala", age: 30},
    { id: 4, name: "bin", age: 25},
    { id: 5, name: "wei", age: 55}
  ])

  function studentsWithAge(index) {
    const newStudents = [...students];
    newStudents[index].age += 1;
    setStudents(newStudents);
  }
  
  return (
    <div>
      <h2>好友列表：</h2>
      <ul>
        {
          friends.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
      <button onClick={e => setFriends([...friends, "long"])}>+haoyou</button>

      <h2>学生列表：</h2>
      <ul>
        {
          students.map((item, index) => {
            return (
              <div key={item.id}>
                <span>姓名：{item.name}--年龄：{item.age}</span>
                <button onClick={e => studentsWithAge(index)}>+1</button>
              </div>
            )
          })
        }
      </ul>
    </div>
  )
}
